<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ajax异步的javascript和xml</title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<!-- 
			ajax
			
			实现方式:
			原生js + xml的搭配(不推荐)
			jquery + json(推荐)
			
			优点:
			1.提高页面加载速度(局部刷新)
			2.提高用户的体验度
		 -->
		<script>
			//原生JS的AJAX写法(繁琐)
			/* function checkUsername() {
				//1.先创建一个ajax的核心对象 XMLHttpRequest
				//注意:兼容性
				var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
				//2.使用open 创建请求 第一个参数是请求方式 第二个是请求的地址(后台Java程序的地址)
				var username = document.getElementById("username").value;
				//GET,参数直接拼在地址栏后面的send()方法发送
				//xhr.open('GET',"/AjaxTeach/user/checkusername?username=" + username);
				//POST,路径不改变,参数是通过
				xhr.open('POST',"/AjaxTeach/user/checkusername");
				//注意: 如果是post请求  必须要写请求头
				xhr.setRequestHeader ("content-type", "application/x-www-form-urlencoded")
				//3.
				//第三步  为xhr.onreadystatechange  设置监听事件
				//注意:ajax请求发送后,readystate会从0~4进行改变
				//readyState  0 请求未初始化  刚刚实例化XMLHttpRequest
				//readyState  1 客户端与服务器建立链接  调用open方法
				//readyState  2 请求已经被接收
				//readyState  3 请求正在处理中
				//readyState  4 请求成功
				xhr.onreadystatechange = function(){
					//判断整个请求发送成功
					if(xhr.readyState == 4 && xhr.status == 200){
						//表示请求发送成功
						//获取后端程序发送过来的数据,假设后台程序通过传过去的姓名在数据库中进行检索,如果有这个姓名,则返回1,否则返回0
						var result = xhr.responseText;
						if(result == 1){
							document.getElementById("usernameHint").innerHTML = "<b style='color:red'>该用户名已存在...</b>";
						}else{
							document.getElementById("usernameHint").innerHTML = "<b style='color:green'>OK</b>";
						}
					}
				}
				//4.发送请求数据  调用send 发送请求 如果不需要参数就写一个null
				//GET版本
				//xhr.send(null)
				//POST
				xhr.send({"username":username});
			} */

			//jQuery发送ajax
			$(function() {
				$("#username").keyup(function() {
					//Get方式
					/* $.get("/AjaxTeach/user/checkusername?username=" + $("#username").val(), function(data, status) {
						if (data == 1) {
							$("#usernameHint").html("<b style='color:red'>该用户名已存在...</b>");
						} else {
							$("#usernameHint").html("<b style='color:green'>OK</b>");
						}
					}); */

					//POST
					/* $.post("/AjaxTeach/user/checkusername",{"username":$("#username").val()}, function(data, status) {
						if (data == 1) {
							$("#usernameHint").html("<b style='color:red'>该用户名已存在...</b>");
						} else {
							$("#usernameHint").html("<b style='color:green'>OK</b>");
						}
					}); */

					//综合版本,更加通用,可以设置多种参数进行调解
					$.ajax({
						//请求方式,默认就是true为异步请求,可以省略
						//async: true,
						//后台程序url地址
						url: "/AjaxTeach/user/checkusername?username=" + $("#username").val(),
						type: "get",
						//发送的数据
						/* data: {
							"username": $("#username").val()
						}, */
						//服务器响应数据格式
						//dataType: "json",
						//成功
						success: function(result) {
							if (result == 1) {
								$("#usernameHint").html("<b style='color:red'>该用户名已存在...</b>");
							} else {
								$("#usernameHint").html("<b style='color:green'>OK</b>");
							}
						}

						//失败
						/* ,error: function(xhr,status,error){
								alert("错误提示： " + xhr.status + " " + xhr.statusText);
						} */
					});
				});
			});
		</script>
	</head>
	<body>
		<input type="text" id="username" placeholder="username" />
		<span id="usernameHint"></span>
	</body>
</html>
